<template>
	<view class="wdh-100 columnbox content jus">
		<view class="no-info" v-if="list.length==0">暂无地址</view>
		<uni-swipe-action>
			<uni-swipe-action-item v-for="(item,index) in list" :key='index' :right-options="options"
				@click="onClick($event,item)" @change="change">
				<view class="columnbox one-info" @click="chooseAddress(item)">
					<view class="rowbox wdh-100 jus">
						<view class="wdh-100 area">{{item.province}}{{item.city}}{{item.county}}</view>
					</view>
					<view class="rowbox meipai wdh-100 spb">
						<view class="menpai-info">{{item.area}}</view>
						<view class="rowbox user-info" style="width: fit-content;margin: 0;"
							@click.stop="editAddress(item)">
							<image src="/static/img/edit.png" mode="widthFix"></image>
							修改
						</view>
					</view>
					<view class="user-info wdh-100 rowbox jus">
						<view>{{item.name}}</view>
						<view>{{item.phone}}</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>

		<view class="wdh-100" style="height: 200rpx;"></view>
		<view class="rowbox bottom-box wdh-100">
			<view class="send-btn wdh-100 rowbox" @click="addAddress">新建地址</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FFF2F1',
						color: '#DD2D1E'
					}
				}]
			};
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			chooseAddress(info) {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.address = info
				uni.navigateBack()
			},
			onClick(e, info) {
				this.deletAddress(info)
			},
			change(e, index) {},
			editAddress(val) {
				uni.navigateTo({
					url: './edit?id=' + val.id
				})
			},
			deletAddress(val) {
				uni.showModal({
					title: '是否确认删除该地址',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中'
							})
							this.$req.post('/user/addrdel', {
								id: val.id
							}).then(res => {
								uni.hideLoading()
								this.getInfo()
							})
						}
					}
				})
			},
			addAddress() {
				uni.navigateTo({
					url: './add'
				})
			},
			getInfo() {
				this.$req.post('/user/addrlist', {
					uid: uni.getStorageSync('uid')
				}).then(res => {
					this.list = res.data.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #F5F7F9;
	}

	.one-info {
		width: 750rpx;
		padding: 32rpx 24rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 2rpx;
	}

	.area {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #455162;
		line-height: 28rpx;
	}

	.meipai {
		margin-top: 24rpx;

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.menpai-info {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #202020;
		line-height: 38rpx;
		width: 500rpx;
	}

	.user-info {
		margin-top: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #455162;
		line-height: 28rpx;

		view {
			margin-right: 32rpx;
		}
	}

	.no-info {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		margin-top: 200rpx;
		color: #95969a;
	}
</style>